---
patternId: web-apps/multiple-screens
---

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="icon"
      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎉</text></svg>"
    />
    <style>
      :root {
        color-scheme: dark light;
      }

      html {
        box-sizing: border-box;
      }

      *,
      *:before,
      *:after {
        box-sizing: inherit;
      }

      body {
        margin: 1rem;
        font-family: system-ui, sans-serif;
      }
    </style>
    <title>How to use multiple screens</title>
  </head>
  <body>
    <h1>How to use multiple screens</h1>
    <div>
      <div>
        Permission Status:
        <span id="permissionStatus"></span>
      </div>
      <div>Screens Available: <span id="screensAvail"></span></div>
    </div>
    <button id="detectScreen">Detect Screens</button>
    <button id="create" disabled>Create Page On Random Screen</button>
    {% set script %}
      const detectButton = document.querySelector('#detectScreen');
      const createButton = document.querySelector('#create');
      const permissionLabel = document.querySelector('#permissionStatus');
      const screensAvailLabel = document.querySelector('#screensAvail');
      const popupUrl = 'popup.html';
      let screenDetails = undefined;
      let permission = undefined;
      let currentScreenLength = undefined;

      detectButton.addEventListener('click', async () => {
        if ('getScreenDetails' in window) {
          screenDetails = await window.getScreenDetails();
          screenDetails.addEventListener('screenschange', (event) => {
            if (screenDetails.screens.length !== currentScreenLength) {
              currentScreenLength = screenDetails.screens.length;
              updateScreenInfo();
            }
          });
          try {
            permission =
              (await navigator.permissions.query({ name: 'window-management' }))
                .state === 'granted'
                ? 'Granted'
                : 'No Permission';
          } catch (err) {
            console.error(err);
          }
          currentScreenLength = screenDetails.screens.length;
          updateScreenInfo();
        } else {
          screenDetails = window.screen;
          permission = 'Window Management API - NOT SUPPORTED';
          currentScreenLength = 1;
          updateScreenInfo();
        }
      });

      createButton.addEventListener('click', () => {
        const screen =
          screenDetails.screens[Math.floor(Math.random() * currentScreenLength)];
        const options = {
          x: screen.availLeft,
          y: screen.availTop,
          width: screen.availWidth,
          height: screen.availHeight,
        };
        window.open(popupUrl, '_blank', getFeaturesFromOptions(options));
      });

      const getFeaturesFromOptions = (options) => {
        return (
          'left=' +
          options.x +
          ',top=' +
          options.y +
          ',width=' +
          options.width +
          ',height=' +
          options.height
        );
      };

      const updateScreenInfo = () => {
        screensAvailLabel.innerHTML = currentScreenLength;
        permissionLabel.innerHTML = permission;
        if ('getScreenDetails' in window && screenDetails.screens.length > 1) {
          createButton.disabled = false;
        } else {
          createButton.disabled = true;
        }
      };
    {% endset %}
    <script>{{ script | minifyJs | cspHash | safe }}</script>
  </body>
</html>
